<template>
  <!-- 同比环比 -->
  <div class="curveWrapper">
    <!-- 图表 -->
    <section class="section">
      <div class="sectionTop paddingBottom16">
        <h3>共{{selectedRows.length}}个监测点<span>*CO浓度单位为mg/m³ 其他颗粒物浓度单位为μg/m³ ，温度单位为°C，湿度单位为%</span></h3>
      </div>
      <div class="sectionSearch">
        <label class="marginRight4">数据类型：</label>
        <!-- 下拉污染源 -->
        <CompareDown2 :downType="downTypeList[0]"
                      :width="inputWidth"
                      :ajaxParam="ajaxParam"
                      @downClickPar="downClickPar" />

        <!-- 日期 年-月-日 -->
        <a-month-picker :disabled-date="disabledDate"
                        :default-value="moment(searchParam.date, monthFormat)"
                        @change="onChangeDate">
          <a-icon slot="suffixIcon"
                  type="calendar" />
        </a-month-picker>

        <a-button type="primary"
                  class="marginLeft16"
                  @click="searchBtnClick">
          查询
        </a-button>

      </div>

      <!-- 折线图 -->
      <CompareBar2 ref="CompareBar2"
                   :ajaxParam="ajaxParam"
                   :scrollTop="scrollTop" />
    </section>
  </div>
</template>

<script>
import moment from 'moment'
import Com from '../.././common/js/com.js'
import CompareBar2 from './children/compareBar2.vue'
import CompareDown2 from './children/compareDown2.vue'
export default {
  props: ['paramsObject'], /* selectedRows: 表格选中数据 */
  data () {
    return {
      inputWidth: '1.2rem',
      downTypeList: ['wry', 'date'],
      monthFormat: 'YYYY-MM',
      searchParam: { /* 页面搜索项 */
        wry: '', /* 污染源 */
        wryName: '',
        date: '',
        dateArr: [],
        dateArr2: [],
        code: [],
        category: [],
        Eparam: ''
      },
      ajaxParam: {}, /* 柱状图柱状图入参 */
      selectedRows: [], /* selectedRows: 表格选中数据 */
      scrollTop: 0
    }
  },
  created () {
    const menu3Search = window.sessionStorage.getItem('menu3Search')
    if (menu3Search) {
      const menu3SearchObj = JSON.parse(menu3Search)
      //   console.log(menu3SearchObj, '--------------->同比环比缓存')
      this.searchParam.date = menu3SearchObj.date
      this.searchParam.wry = menu3SearchObj.wry
      this.searchParam.wryName = menu3SearchObj.wryName
      this.searchParam.Eparam = menu3SearchObj.Eparam
    } else {
      const date = Com.stringTime((new Date()), 'month')
      this.searchParam.date = date
    }
  },
  mounted () {
    if (this.paramsObject.selectedRows) { // props参数
      this.selectedRows = this.paramsObject.selectedRows
      this.searchBtnClick() // 查询事件
    }
    document.getElementById('bodyWrapperId').addEventListener('scroll', () => {
      const top = document.getElementById('bodyWrapperId').scrollTop
      this.scrollTop = top
    })
    // if (this.$store.state.moduleSD.SelectedTable) { // store参数
    //   this.selectedRows = this.$store.state.moduleSD.SelectedTable.selectedRows
    //   this.searchBtnClick() // 查询事件
    // }
  },
  methods: {
    moment,
    disabledDate: function (current) { // 不能选择当月之后的日期
      const date = Com.stringTime((new Date()), 'monthDate')
      return current && current > new Date(date)
    },
    onChangeDate: function (date, dateString) { // 日期选择
      this.date = dateString
    },
    downClickPar: function (val, type, code, gkz) { // 下拉选择
      if (type === 'wry') {
        this.searchParam.wryName = val
        this.searchParam[type] = val
        this.searchParam.Eparam = val
      } else {
        this.searchParam[type] = val
      }
    },
    searchBtnClick: function () { // 查询事件
      this.ajaxParam = {
        wry: this.searchParam.wry, /* 污染源 */
        wryName: this.searchParam.wryName,
        date: this.searchParam.date,
        dateArr: this.searchParam.dateArr,
        dateArr2: this.searchParam.dateArr2,
        code: this.searchParam.code,
        category: this.searchParam.category,
        Eparam: this.searchParam.Eparam
      }
      this.filterFun() // 过滤数据
      window.sessionStorage.setItem('menu3Search', JSON.stringify(this.ajaxParam))
      // console.log(JSON.stringify(this.ajaxParam), '------->柱状图2入参')
      this.$refs.CompareBar2.initChart(this.ajaxParam, this.scrollTop)
    },
    filterFun: function () { // 过滤数据
      // 添加同比环比日期
      const dateArr = [[], [], []]
      const dateArr2 = []
      const today = this.ajaxParam.date
      const arr = today.split('-') // 今天日期
      const todatLast = Com.getPreMonth(today) // 环比日期
      const arr2 = todatLast.split('-')

      var days1 = new Date(arr[0], arr[1], 0).getDate() // 获取当前日期中月的天数
      var days2 = new Date((Number(arr[0]) - 1), arr[1], 0).getDate() // 获取同比日期中月的天数
      var days3 = new Date(arr2[0], arr2[1], 0).getDate() // 获取环比日期中月的天数
      dateArr[0].push([today + '-01', today + '-' + days1])
      dateArr[1].push([(Number(arr[0]) - 1) + '-' + arr[1] + '-01', (Number(arr[0]) - 1) + '-' + arr[1] + '-' + days2])
      dateArr[2].push([todatLast + '-01', todatLast + '-' + days3])
      this.ajaxParam.dateArr = dateArr

      dateArr2[0] = (today)
      dateArr2[1] = ((Number(arr[0]) - 1) + '-' + arr[1])
      dateArr2[2] = (todatLast)
      this.ajaxParam.dateArr2 = dateArr2

      // 过滤数据
      if (this.selectedRows.length > 0) {
        const code = []
        const category = []
        this.selectedRows.forEach((item, i) => {
          code.push(item.code)
          category.push(item.name)
        })
        this.ajaxParam.code = code.join(',')
        this.ajaxParam.category = code
      }
    }
  },
  watch: {
    paramsObject: {
      handler: function (value) { // props参数
        const result = JSON.parse(JSON.stringify(value))
        this.selectedRows = result.selectedRows
        this.searchBtnClick() // 查询时间
      },
      deep: true
    }
    // '$store.state.moduleSD.SelectedTable': { // store参数
    //   handler: function () {
    //     this.selectedRows = this.$store.state.moduleSD.SelectedTable.selectedRows
    //     this.searchBtnClick() // 查询事件
    //   },
    //   deep: true
    // }
  },
  components: {
    CompareBar2,
    CompareDown2
  }
}
</script>

<style lang="less" scoped>
.timeGroup > span {
  font-size: 0.14rem;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 0.1rem;
}
</style>
